<script setup>
import {axiosAllCars} from "../api";
import {reactive} from "vue"
import {useRoute, useRouter} from "vue-router";

const routerGroup = reactive({
  route: useRoute(),
  router: useRouter(),
  linkToItemInfo(id) {
    this.router.push({name: "carItem", query: {id: id}})
  }
})

const shopInfoGroup = reactive({
  baseUrl: "http://118.178.254.102:1252/",
  shopInfo: [],
  itemList: [],
  searchName: "",
  async getInitData() {
    const result = await axiosAllCars();
    this.itemList = result.data
    this.shopInfo = result.data.map(item => {
      item.img = item.img.split("_")[0]
      return item
    })
    shopInfoGroup.select()
  },
  search() {
    if (this.searchName !== "") {
      this.shopInfo = []
      this.itemList.map(item => {
        if (item.name === this.searchName || item.type === this.searchName || item.country === this.searchName || item.level === this.searchName || item.type + item.name === this.searchName || item.price === this.searchName) {
          this.shopInfo.push(item)
        }
      })
    } else {
      this.shopInfo = this.itemList
    }
  },
  select() {
    console.log(routerGroup.route.query)
    if (Object.keys(routerGroup.route.query).length > 0) {
      this.shopInfo = []
      this.itemList.map(item => {
        if (item.type === routerGroup.route.query.type && item.country === routerGroup.route.query.country && item.level === routerGroup.route.query.level && item.price === routerGroup.route.query.price) {
          this.shopInfo.push(item)
        }
      })
    }
  }
})

shopInfoGroup.getInitData()

</script>

<template>
  <div class="page-wrap">
    <div class="container">
      <div class="page-header">
        <div class="search">
          <div class="search-text">
            <input v-model="shopInfoGroup.searchName" class="search-text-logout" placeholder="请输入" type="text"/>
          </div>
          <div class="search-button">
            <button class="search-button-logout" @click="shopInfoGroup.search">搜索</button>
          </div>
        </div>
      </div>
      <div class="page-body">
        <div class="list">
          <div v-for="(item,index) of shopInfoGroup.shopInfo" :key="index" class="list-item"
               @click="routerGroup.linkToItemInfo(item.id)">
            <div class="list-item-img">
              <img :src="shopInfoGroup.baseUrl + item.img" alt="" class="list-item-img-logout"/>
            </div>
            <div class="list-item-text">
              <span>{{ item.type + item.name }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped src="../css/shop.css">

</style>
